<template>
  <div class="app-container">
    <div style="padding: 5px 0px">
      <toolbar
        :table="$refs.table"
        :moduleCode="$enums.moduleType.account.value"
        :buttons="['add', 'delete', 'export', 'import', 'log', 'search']"
        @add="handleEdit"
        @delete="handleDelete"
        @refresh="handleRefresh"
        @export="handleExport"
        @import="handleImport"
      >
        <template v-slot:search-slot>
          <span style="padding-left: 5px">
            <el-input
              v-model="filter.keyword"
              placeholder="请输入关键字"
              style="width: 200px"
              size="mini"
              clearable
            ></el-input>
          </span>
          <span style="padding-left: 5px"
            ><el-checkbox v-model="filter.activated" size="mini"
              >仅启用</el-checkbox
            ></span
          >
          <span style="padding-left: 5px"
            ><el-button type="primary" size="mini" @click="handleSearch"
              >搜索</el-button
            ></span
          >
        </template>
      </toolbar>
    </div>
    <div>
      <el-table
        :data="list"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        border
        fit
        highlight-current-row
        ref="table"
        @cell-dblclick="hanldeDbClick"
        size="small"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="编码">
          <template slot-scope="scope">
            {{ scope.row.code }}
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            {{ getAccounTypeName(scope.row.accountType) }}
          </template>
        </el-table-column>
        <el-table-column label="方向">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.direction == 1">借</el-tag>
            <el-tag type="warning" v-if="scope.row.direction == -1">贷</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="外币核算">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.foreignCurrency == true"
              >是</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="核算维度">
          <template slot-scope="scope">
            <dimension-panel
              :items.sync="scope.row.dimensionItems"
            ></dimension-panel>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.activated == false"
              >已禁用</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="() => handleAddChild(scope.row)"
              >新增子级</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="() => handleEdit(scope.row.id)"
              >{{ $t("common.edit") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="currentId ? '编辑科目' : '新增科目'"
      :visible.sync="showDialog"
      :width="'60%'"
    >
      <edit
        :id="currentId"
        :parentId="currentParentId"
        v-if="showDialog"
        @success="handleSave"
        @close="showDialog = false"
      ></edit>
    </el-dialog>
    <el-drawer
      direction="rtl"
      :visible.sync="importDrawer"
      :with-header="false"
      style="overflow: auto"
    >
      <div v-if="importDrawer">
        <importPanel
          :moduleCode="$enums.moduleType.account.value"
        ></importPanel>
      </div>
    </el-drawer>
    <export-panel
      v-show="false"
      ref="export"
      :moduleCode="$enums.moduleType.account.value"
    ></export-panel>
  </div>
</template>

<script>
import toolbar from "@/components/Bar/toolbar.vue";
import edit from "./edit.vue";
import dimensionPanel from "./dimensionPanel.vue";
import importPanel from "@/components/Import/index.vue";
import exportPanel from "@/components/Export/index.vue";
import { getAccounts, deleteAccount } from "@/api/account";
export default {
  components: {
    toolbar,
    edit,
    dimensionPanel,
    importPanel,
    exportPanel,
  },
  data() {
    return {
      list: null,
      filter: {
        keyword: null,
        activated: null,
      },
      showDialog: false,
      current: {},
      currentId: "",
      currentParentId: "",
      importDrawer: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.filter.includeDetail = true;
      getAccounts(this.filter).then((res) => {
        res = res || [];
        this.list = res.toTree();
      });
    },
    handleEdit(id) {
      this.showDialog = true;
      this.currentId = id;
      this.currentParentId = null;
    },
    handleAddChild(row) {
      this.currentParentId = row.id;
      this.showDialog = true;
      this.currentId = null;
    },
    handleDelete({ ids }) {
      if (!ids || ids.length == 0) return;
      for (let i = 0; i < ids.length; i++) {
        deleteAccount(ids[i]).then((res) => {
          if (i == ids.length - 1) {
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              position: "bottom-right",
            });
            this.getData();
          }
        });
      }
    },
    handleRefresh() {
      this.getData();
    },
    hanldeDbClick(row) {
      this.currentId = row.id;
      this.editDrawer = true;
    },
    handleSearch() {
      this.getData();
    },
    getAccounTypeName(type) {
      let name = "";
      switch (type) {
        case 10:
          name = "资产";
          break;
        case 11:
          name = "流动资产";
          break;
        case 12:
          name = "非流动资产";
          break;
        case 20:
          name = "负债";
          break;
        case 21:
          name = "流动负债";
          break;
        case 22:
          name = "非流动负债";
          break;
        case 30:
          name = "共同";
          break;
        case 40:
          name = "权益";
          break;
        case 41:
          name = "所有者权益";
          break;
        case 42:
          name = "以前年度损益调整";
          break;
        case 50:
          name = "成本";
          break;
        case 51:
          name = "成本";
          break;
        case 52:
          name = "营业成本及税金";
          break;
        case 53:
          name = "其他损失";
          break;
        case 54:
          name = "期间费用";
          break;
        case 55:
          name = "所得税";
          break;
        case 60:
          name = "收益";
          break;
        case 61:
          name = "营业收入";
          break;
        case 62:
          name = "其他收益";
          break;
      }
      return name;
    },
    handleSave() {
      this.showDialog = false;
      this.getData();
    },
    handleExport() {
      this.$refs.export.exportData();
    },
    handleImport() {
      this.importDrawer = true;
    },
  },
  computed: {},
};
</script>
